import { Button, message, Modal } from "antd"
import { useCallback, useEffect, useRef, useState } from "react"
import styled from "styled-components"
import useAvatarCanvas from "../hooks/useAvatarCanvas"
import PlusOutlined from "@ant-design/icons/PlusOutlined"
import MinusOutlined from "@ant-design/icons/MinusOutlined"

const Footer = styled.div`
    display:flex;
    justify-content:right;
`
const StyledButton = styled(Button)`
    margin-right:5px;
    margin-left:5px;
`

const Container = styled.div`
    display:flex;
`
const StyledCanvasContent = styled.div`
    width:300px;
    height:300px;
    position:relative;
`
const StyledRight = styled.div`
    width:calc(100% - 300px);
    padding:20px;
`
const StyledCanvas = styled.canvas`
    width:300px;
    height:300px;
`
const StyledMask = styled.div`
    background-image:url(/upload-border.png);
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
`
const StyledAlign = styled.div`
    text-align:center;
`
const CanvasFlex = styled.div`
    display:flex;
    justify-content:center;
    margin-top:5px;
    canvas{
        border-radius: 50%;
    }
`
const FooterToolbar = styled.div`
    display:flex;
    justify-content:center;
`
const UploadImage = ({
    visible,
    onCancel,
    title = "上传图片",
    onFinish
}) => {
    const {
        show,
        canvasRef,
        upd,
        onMoveDown,
        result
    } = useAvatarCanvas();
    const ref50 = useRef<HTMLCanvasElement>();
    const ref100 = useRef<HTMLCanvasElement>();
    useEffect(() => {
        if (!result) return;
        const img = new Image();
        img.src = result;
        img.onload = () => {
            const r50 = ref50.current.getContext("2d");
            const r100 = ref100.current.getContext("2d");
            r50.clearRect(0, 0, 50, 50);
            r100.clearRect(0, 0, 100, 100);
            r50.drawImage(img, 0, 0, 50, 50);
            r100.drawImage(img, 0, 0, 100, 100);
        }
    }, [result])
    const clickInput = useCallback(() => {
        show()
    }, [])
    const wheel = useCallback((e) => {
        const { deltaY } = e;
        upd(deltaY < 0)
    }, [upd]);
    const onClick = useCallback(() => {
        const p = onFinish(result.slice(result.indexOf(",") + 1));
        if (p instanceof Promise) {
            p.then((e) => message.success(e))
                .catch(err => {
                    if (!!err.message) message.error(err.message)
                })
                .finally(() => {
                    onCancel();
                });
        }
    }, [result])
    const add = useCallback(() => {
        upd(true)
    }, [upd])
    const sub = useCallback(() => {
        upd(false)
    }, [upd])
    return (
        <Modal
            title={title}
            footer={null}
            onCancel={onCancel}
            visible={visible}
        >
            <Container>
                <StyledCanvasContent >
                    <StyledCanvas
                        width={300}
                        ref={canvasRef}
                        height={300}
                    />
                    <StyledMask
                        onMouseDown={onMoveDown}
                        onWheel={wheel}
                    />
                    {!!result && <FooterToolbar>
                        <StyledButton onClick={add}>
                            <PlusOutlined />
                        </StyledButton>
                        <StyledButton onClick={sub}>
                            <MinusOutlined />
                        </StyledButton>
                    </FooterToolbar>}
                </StyledCanvasContent>
                <StyledRight>
                    <StyledAlign>
                        预览
                    </StyledAlign>
                    <CanvasFlex>
                        <canvas width={50} height={50} ref={ref50} />
                    </CanvasFlex>
                    <StyledAlign>
                        50x50
                    </StyledAlign>
                    <CanvasFlex>
                        <canvas width={100} height={100} ref={ref100} />
                    </CanvasFlex>
                    <StyledAlign>
                        100x100
                    </StyledAlign>
                </StyledRight>
            </Container>
            <Footer>
                <StyledButton
                    ghost
                    type="link"
                    onClick={clickInput}
                >
                    上传
                </StyledButton>
                <StyledButton
                    type="primary"
                    onClick={onClick}
                >
                    确定
                </StyledButton>
            </Footer>
        </Modal>
    )
}
export default UploadImage